<script setup lang="ts">
import { A11y, Autoplay, Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'

function onSwiper(swiper: any) {
  console.log(swiper)
}
function onSlideChange() {
  console.log('slide change')
}
const modules = [Navigation, A11y, Autoplay]
</script>

<template>
  <Swiper
    :slides-per-view="1"
    :space-between="0"
    :modules="modules"
    :pagination="{ clickable: true }"
    :autoplay="{
      delay: 5000,
      disableOnInteraction: false,
    }"
    navigation
    :loop="true"
    @swiper="onSwiper"
    @slide-change="onSlideChange"
  >
    <SwiperSlide>
      <img class="item" src="@/assets/bg1.png" alt="">
    </SwiperSlide>
    <SwiperSlide>
      <img class="item" src="@/assets/bg2.png" alt="">
    </SwiperSlide>
    <SwiperSlide>
      <img class="item" src="@/assets/bg3.jpg" alt="">
    </SwiperSlide>
  </Swiper>
</template>

<style scoped>
:deep(.swiper-button-prev) {
  color: #fff;
}
:deep(.swiper-button-next){
  color: #fff;
}
.item {
  width: 100%;
  height: auto;
}
</style>
